<template>
  <view class="page-bg">
    <view class="header-section p-3">
      <view class="d-flex d-flex-middle mb-2">
        <text class="font-bold font32">提现记录</text>
      </view>
      <view class="d-flex mb-1 pt-2">
        <text class="font26">总计提现: <text class="font32 colorf00 px-1">{{ totalAmount }}</text>元</text>
      </view>
    </view>

    <view class="mx-2">
      <scroll-view
          :scroll-y="true"
          @scrolltolower="onReachBottom"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onPullDownRefresh"
          style="height: calc(100vh - 200rpx);"
      >
        <view v-if="withdrawList.length === 0 && !loading" class="no-data text-center py-5">
          <text class="font28 color999">暂无提现记录</text>
        </view>
<!-- 1是收益，2是提现-->

        <view v-else>
<!--          <view-->
<!--              class="withdraw-item mycheck p-3 mb-2"-->
<!--              v-for="(item, index) in withdrawList"-->
<!--              :key="index"-->
<!--          >-->
<!--            <view class="d-flex d-flex-between d-flex-middle mb-2">-->
<!--              <text class="font-bold font30 ">提现金额: ¥{{ item.amount }}</text>-->
<!--            </view>-->

<!--            <view class="d-flex d-flex-between mb-1">-->
<!--              <text class="font26 color999">申请时间</text>-->
<!--              <text class="font26">{{ formatTime(item.updated_at) }}</text>-->
<!--            </view>-->

<!--          </view>-->
          <view v-for="(item,index) in withdrawList" :key="index" class="b-d p-3 mb-2 rounded15 record-item d-flex-middle  py-3">
            <view class="d-flex d-flex-column">
              <text v-if="item.type == 1">收益</text>
              <text v-if="item.type == 2">提现</text>
              <text class="time font22 color999 mt-1">
                {{ item.updated_at }}</text>
            </view>
            <view>
              <text v-if="item.type == 1" class="income">+ {{ item.amount }}</text>
              <text v-if="item.type == 2" class="expense">- {{ item.amount }}</text>
            </view>
          </view>
        </view>

        <!-- 加载更多提示 -->
        <view class="text-center py-3" v-if="loadingMore">
          <text class="font26 color999">加载中...</text>
        </view>

        <view class="text-center py-3" v-if="!hasMore && withdrawList.length > 0">
          <text class="font26 color999">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { payApi } from '@/http/payApi.js'

export default {
  data() {
    return {
      withdrawList: [],
      totalAmount: '0.00',
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      loadingMore: false,
      refreshing: false
    }
  },

  onLoad() {
    this.loadWithdrawList()
  },

  methods: {
    async loadWithdrawList() {
      // 防止重复请求
      if (this.loading) return;

      this.loading = true;
      try {
        const res = await payApi.getWithdrawList({
          page: this.page,
          pageSize: this.pageSize
        })

        if (this.page === 1) {
          this.withdrawList = res.data || []
          this.totalAmount = res.agent_balance || '0.00'
        } else {
          this.withdrawList = [...this.withdrawList, ...(res.data || [])]
        }

        // 判断是否还有更多数据
        this.hasMore = res.data && res.data.length === this.pageSize

        // 隐藏刷新状态
        if (this.refreshing) {
          this.refreshing = false;
        }
      } catch (error) {
        console.error('获取提现记录失败:', error)
        uni.showToast({
          title: '获取提现记录失败',
          icon: 'none'
        })

        // 隐藏刷新状态
        if (this.refreshing) {
          this.refreshing = false;
        }
      } finally {
        this.loading = false;
        this.loadingMore = false;
        // 确保下拉刷新状态被清除
        if (this.refreshing) {
          this.refreshing = false;
          uni.stopPullDownRefresh();
        }
      }
    },

    // 下拉刷新
    async onPullDownRefresh() {
      // 防止重复触发刷新
      if (this.refreshing) return;

      this.refreshing = true;
      this.page = 1;
      this.hasMore = true;
      this.loadingMore = false; // 重置加载更多状态
      await this.loadWithdrawList();
    },

    // 上拉加载更多
    async onReachBottom() {
      // 防止重复触发加载更多
      if (!this.hasMore || this.loading || this.loadingMore || this.refreshing) return;

      this.page++;
      this.loadingMore = true;
      await this.loadWithdrawList();
    },

    getStatusText(status) {
      const statusMap = {
        0: '审核中',
        1: '已通过',
        2: '已拒绝'
      }
      return statusMap[status] || '未知状态'
    },

    getStatusClass(status) {
      const classMap = {
        0: 'font26 colorFF9500',  // 审核中 - 橙色
        1: 'font26 color00bf0d',  // 已通过 - 绿色
        2: 'font26 colorf00'      // 已拒绝 - 红色
      }
      return classMap[status] || 'font26 color999'
    },

    formatTime(timestamp) {
      if (!timestamp) return ''

      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style scoped>
.page-bg {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: 20rpx;
}

.header-section {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx;
}

.mycheck {
  border-radius: 20rpx;
  background-color: #fff;
}

.colorFF9500 {
  color: #FF9500;
}

.color00bf0d {
  color: #00bf0d;
}

.colorf00 {
  color: #f00;
}

.color999 {
  color: #999;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.record-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.income {
  color: #4CAF50;
}

.expense {
  color: #F44336;
}

.b-d {
  background-color: #f8f8f8;
}
</style>
